<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">A Scale</view>
			<view class="tui-page__desc">刻度尺：刻度尺滚动选择器，可自定义样式</view>
		</view>
		<view class="tui-box">
			<view class="tui-title">你选择的值为：{{value}}</view>
			<tui-scale-horizontal :value="defaultValue" @change="change"></tui-scale-horizontal>
		</view>
		<view class="tui-box">
			<view class="tui-title">自定义样式：{{value2}}</view>
			<tui-scale-horizontal :min="100" :max="900" :interval="100" backgroundColor="#FFD531" color="#fff" lineColor="#fff" pointerColor="#EB0909" @change="change2"></tui-scale-horizontal>
		</view>
		<view class="tui-box tui-flex__vertical">
			<view class="tui-title__vertical">{{value3}}</view>
			<tui-scale-vertical :value="defaultValue" @change="change3"></tui-scale-vertical>
		</view>
		<view class="tui-box tui-flex__vertical">
			<view class="tui-title__vertical">{{value4}}</view>
			<tui-scale-vertical :height="400" :min="100" :max="900" :interval="100" backgroundColor="#FFD531" color="#fff" lineColor="#fff" pointerColor="#EB0909" @change="change4"></tui-scale-vertical>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//初始值
				defaultValue: 4,
				value: 4,
				value2: 100,
				value3:4,
				value4:100
			}
		},
		methods: {
			change(e) {
				this.value = e.value.toFixed(2)
			},
			change2(e) {
				this.value2 =Math.round(e.value)
			},
			change3(e) {
				this.value3 = e.value.toFixed(2)
			},
			change4(e) {
				this.value4 = Math.round(e.value)
			}
		}
	}
</script>

<style>
	.container{
		padding-bottom: 100rpx;
	}
	.tui-title {
		padding: 60rpx 30rpx 30rpx;
		box-sizing: border-box;
	}
	.tui-title__vertical {
		width: 200rpx;
		padding:0 50rpx;
		box-sizing: border-box;
		white-space: nowrap;
		text-align: right;
	}
	.tui-flex__vertical{
		display: flex;
		align-items: center;
		padding-top: 60rpx;
	}
</style>
